<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Vendor JS Files -->
    <script th:src="@{vendor/purecounter/purecounter.js}"></script>
    <script th:src="@{vendor/aos/aos.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{vendor/isotope-layout/isotope.pkgd.min.js}"></script>
    <script th:src="@{vendor/swiper/swiper-bundle.min.js}"></script>
    <script th:src="@{vendor/php-email-form/validate.js}"></script>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <!-- Template Main JS File -->
<!--    <script th:src="@{js/main.js}"></script>-->
    <script th:inline="javascript">
        $(document).ready(function(){
            $("#news1").click(function (e) {
                e.preventDefault();
                $("#test").load(("news1.html"));
                window.location.hash="news1.html"
            })
                $("#news2").click(function (e) {
                    e.preventDefault();
                    $("#test").load(("news2.html"));
                    window.location.hash="news2.html"
                })
        })
    </script>
    <style>
.demoContainer{
    display: flex;
    background-color: #f3f5f6;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.demoContainer p {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    background-color: #0eb6f8;
    width: 198px;
    font-size: 14px;
    color: #fff;
    margin: 2% 0.5%;
    transition: all 0.3s;
    text-align: center;
}
.box{
    align-items: center;
    width: 80%;
    display: flex;
    flex-direction: column;
}
.box-item{
    display: flex;
    flex-direction: row;
    background-color: #fff;
    /*border: 1px #666666 solid;*/
    width: 80%;
    /*height: 200px;*/
    overflow: hidden;
    position: relative;
    /*display: inline-block;*/
    /* 确保内容不会溢出容器 */
    /*justify-content: center;//控制主轴对齐*/
    align-items: start;//控制交叉轴对齐
    border: #274eee solid;
    /*padding: 10px;//页面内容距离边框*/
    /*margin: 30px;//item之间相距距离*/
}
.box-item:hover h3{
  color: #0d6efd;
}
.box-item img{
    width:300px;
    height:180px;
    margin: 10px 20px;
}
.box-item h3 {
    margin: 20px 30px
}
.box-item span {
    color: #666666;
    font-size: 15px;
    margin-left: 50px
}
.box-item p{
    width: 850px;
    background: #fff;
    color: #666666;
    font-size: 15px;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    margin-left: 30px;
 }
.box-item button{
   border: #666666 1px solid;
    margin-left: 40px
}
.box-item:hover button {
    background-color: #0d6efd;
    color: #fff;
}
    </style>
</head>
<body>
<div class="demoContainer">
    <p>公司新闻</p>
    <div class="box">
        <div class="box-item" id="news1">
            <img th:src="@{img/solutions/MES_1.jpg}"  alt="...">
            <div>
                <h3>允升科技智慧工厂刷新工业企业产能</h3>
                <span>2024-4-19</span>
                <p>搭载着工厂智能化MES系统控制生产的车间内智能化生产线飞速运转、全量大数据实时监测……在这个日产量达100万只锂电池的“5G智慧工厂”里，关键工序全部实现智能化生产，全过程只需几位技术人员通过屏幕进行操控。</p>
                <button>查看更多</button>
                <hr>
            </div>
        </div>
        <div class="box-item" id="news2">
            <img th:src="@{img/news/news-1.jpg}"  width="300px" height="200px" alt="...">
            <div>
                <h3>立泰能源自主研发船舶动力锂电池获得重大技术突破</h3>
                <span>2024-4-19</span>
                <p>立泰能源在船舶动力能源方面实现了关键的技术突破。船舶动力锂电池经过精心设计，具备高安全性、高能量密度、智能运维和长寿命等特点，可满足船舶动力系统的需求。
                    具体体现在：电池管理系统（BMS）通过对电池数据状态告警实时监控、自动均衡、智能充放电的管理，起到保障安全、延长寿命、估算剩余电量等重要作用；
                    能量管理系统（EMS）提供能源用户详细耗能信息，触发自发性节能动作，并将数据导入大数据平台，协助用户节能改善。这些技术为船舶动力能源领域带来了更安全、可靠和高效的解决方案。</p>
                <button>查看更多</button>
                <hr>
            </div>
        </div>
        </div>
    </div>
</div>
</body>
</div>
</html>